<template>
  <div>
    <!-- 添加或修改资产清单表对话框 -->

    <el-dialog ref="editDialog" v-model="openFlag" title="新增盘点单" width="61%" height="71%" append-to-body>
      <div class="app-container">
        <!-- 基本信息部分 -->
        <div>基本信息</div>
        <el-form ref="baseForm" :model="baseFormData" :rules="baseFormRules" label-width="100" class="check">
          <el-row>
            <el-col :span="12">
              <el-form-item label="盘点名称" prop="title">
                <el-input v-model="baseFormData.title" placeholder="请输入名称" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="盘点管理员" prop="userId">
                <user-select-multi v-model="baseFormData.userId" placeholder="请输入"></user-select-multi>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注" prop="remark">
                <el-input style="width: 100%;" type="textarea" v-model="baseFormData.remark" placeholder="请输入备注" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="options-container">
                <el-row>
                  <el-col :span="8">
                    <el-checkbox v-model="baseFormData.pdAutoUpdate">已盘资产修改内容自动更新资产信息</el-checkbox>
                  </el-col>
                  <el-col :span="8">
                    <el-checkbox v-model="baseFormData.loseAutoCreateApply">未盘、盘亏资产自动创建资产处理单</el-checkbox>
                  </el-col>
                  <el-col :span="8">
                    <el-checkbox v-model="baseFormData.newAudoCreateApply">盘盈资产自动新增入库</el-checkbox>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-checkbox v-model="baseFormData.managerChoose">管理员盘点时，允许直接选择资产</el-checkbox>
                  </el-col>
                  <el-col :span="8">
                    <el-checkbox v-model="baseFormData.employeeChoose">员工盘点时，允许直接选择资产</el-checkbox>
                  </el-col>
                  <el-col :span="8">
                    <el-checkbox v-model="baseFormData.employeeSelf">员工自主盘点</el-checkbox>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-checkbox v-model="baseFormData.uploadPhoto">盘点资产时必须拍照</el-checkbox>
                  </el-col>
                  <el-col :span="8">
                    <el-checkbox v-model="baseFormData.pdPhotoCamera">盘点图片仅允许拍照上传</el-checkbox>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </el-form>
        <!-- 盘点范围部分 -->
        <div>盘点范围</div>
        <p class="checkzc">
          通过以下条件筛选要盘点的资产，满足全部选择条件的资产将会被包含在盘点单中，如果不选任何条件将包含您权限内的全部资产
        </p>
        <el-form ref="rangeForm" :model="rangeFormData" label-width="100" class="scope">
          <el-row>
            <el-col :span="8">
              <el-form-item label="类别" prop="categoryId">
                <category-select v-model="rangeFormData.categoryId" placeholder="请输入" clearable/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="仓库" prop="warehouseId">
                <warehouse-select v-model="rangeFormData.warehouseId" placeholder="请输入" clearable />
              </el-form-item>
            </el-col>
            <el-row></el-row>
            <el-col :span="8">
              <el-form-item label="资产状态" prop="status">
                <el-select v-model="rangeFormData.status" placeholder="请选择" clearable>
                  <el-option label="在用" :value="1"></el-option>
                  <el-option label="闲置" :value="0"></el-option>
                  <el-option label="维修中" :value="9"></el-option>
                  <el-option label="报废" :value="5"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="所在公司" prop="companyId">
                <company-select v-model="rangeFormData.companyId"></company-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="使用部门" prop="department">
                <el-input v-model="rangeFormData.deptId" placeholder="请输入使用部门" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="管理员" prop="adminId">
                <user-select v-model="rangeFormData.adminId"></user-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-col :span="8">
            <el-form-item label="盘点范围" prop="department">
              <el-select v-model="rangeFormData.range" placeholder="请选择">
                <el-option label="全盘" :value="1"></el-option>
                <el-option label="抽盘" :value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

        </el-form>
      </div>


      <div slot="footer">
        <el-row type="flex" justify="end" class="button_btn">
          <el-button type="primary" @click="save">保存</el-button>
          <el-button @click="close">取消</el-button>
        </el-row>
      </div>
    </el-dialog>

    <!-- 选择对话框 -->
    <choose-dialog ref="chooseDialog" @sub="onChooseSub"></choose-dialog>
  </div>
</template>

<script setup>
import api from "./api.js";
import UserSelect from "@/components/User/UserSelect.vue";
import ChooseDialog from "@/components/Asset/ChooseDialog.vue";
import CategorySelect from "@/components/Asset/CategorySelect.vue";
import WarehouseSelect from "@/components/Warehouse/WarehouseSelect.vue";
import UserSelectMulti from "@/components/User/UserSelectMulti.vue";
import CompanySelect from "@/components/CommonSelect/CompanySelect.vue";

const emit = defineEmits(['sub']);

const { proxy } = getCurrentInstance();

const openFlag = ref(false);

const baseFormDataInit = {
  title: '',
  userId: '',
  remark: '',
  managerChoose: true,

}

const baseForm = ref();

const baseFormData = reactive({...baseFormDataInit});

// 基本信息的校验规则
const baseFormRules = {
  title: [
    { required: true, message: '请输入名称', trigger: 'blur' },
    { max: 50, message: '名称不能超过50个字符', trigger: 'blur' }
  ],
      userId: [
    { required: true, message: '请选择盘点人', trigger: 'blur' }
  ],
      remark: [
    { max: 200, message: '备注不能超过200个字符', trigger: 'blur' }
  ]
}

const rangeForm = ref()

const rangeFormDataInit = {
  categoryId: null,
  warehouseId: null,
  status: null,
  companyId: null,
  managerId: null,
  deptId: null
}

const rangeFormData = reactive({...rangeFormDataInit});

// 打开对话框，并根据操作类型加载数据
function open() {
  openFlag.value = true;
  reset();
}

// 关闭对话框
function close() {
  openFlag.value = false;
}

// 重置表单数据
function reset() {
  Object.assign(baseFormData, baseFormDataInit);
  Object.assign(rangeFormData, rangeFormDataInit);

}

// 获取参数
function getParams() {
  return {
    baseFormData: baseFormData,
    rangeFormData: rangeFormData,
  }
}

// 保存表单数据
async function save() {

  // 验证基础信息
  let valid = await baseForm.value.validate();

  if (!valid) {
    proxy.$message.error("请检查基本信息是否正确！");
  }

  valid = await rangeForm.value.validate();
  if (!valid) {
    proxy.$message.error("请检查盘点范围是否正确！");
  }

  api.save(getParams()).then(response => {
    emit('sub');
    proxy.$message.success("保存成功！");
    close();
  }).catch(error => {
    proxy.$message.error("保存失败，请稍后重试！");
  });

}

defineExpose({
  open
})


</script>
<style scoped>

.button_btn{
  padding: 10px;
}

.options-container {
  padding-left: 110px;
  margin-bottom: 20px;
}

.container {
  margin-left: 85px;
}

.scope{
  margin-top: 20px;
}

.checkzc{
  height: 40px;
  font-size: 13px;
  background-color:#fef0f0 ;
  color: red;
  padding-top:10px ;
  text-indent:1cm
}

</style>